<template>
  <div class="app">
    <button
      v-for="item in tabs"
      :key="item"
      @click="change(item)"
      :class="{ active: currentTab === item }"
    >
      {{ item }}
    </button>

    <keep-alive include="home,about">
      <component :is="currentTab"></component>
    </keep-alive>
  </div>
</template>

<script>
// import Home from './Home.vue'
// import About from './About.vue'
// import Banner from './Banner.vue'
  import {defineAsyncComponent} from 'vue'
  const AsyncHome=defineAsyncComponent(()=>import('./Home.vue'))
  const AsyncAbout=defineAsyncComponent(()=>import('./About.vue'))
  const AsyncBanner=defineAsyncComponent(()=>import('./Banner.vue'))
  
export default {
  components: {
    Home:AsyncHome,
    About:AsyncAbout,
    Banner:AsyncBanner
  },
  data() {
    return {
      title: '我还是标题',
      currentTab: 'Home',
      tabs: ['Home', 'About', 'Banner'],
    }
  },
  methods: {
    change(item) {
      this.currentTab = item
    },
  },
}
</script>

<style scoped>
h2 {
  color: red;
}
.active {
  color: red;
}
</style>
